<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="/layer/layer.js"></script>
</head>
<body>
<div id="addIcon">
    <form>

        <div class="col-sm-10" class="form-group">
            <label for="exampleInputEmail1">名字</label>
            <input class="form-control" id="exampleInputEmail1" placeholder="名字" v-model="imageInfo.name">
        </div>
        <div class="col-sm-10" class="form-group">
            <label for="exampleInputFile">图片</label>
            <input type="file" id="exampleInputFile">
            <br>
        </div>
        <button type="button" class="btn btn-default" @click="addImage">保存</button>
    </form>
</div>
<script>
    new Vue({
        el: "#addIcon",
        data: {
            imageInfo: {},

        },
        created() {

        },
        methods: {
            addImage() {
                var vm = this;
                var formData=new FormData();
                var inputDOM=document.getElementById("exampleInputFile");
                var file=inputDOM.files[0];
                formData.append('file',file);
                formData.append('name',vm.imageInfo.name);
                $.ajax({
                    url:"add",
                    type:"post",
                    data:formData,
                    contentType:false,
                    processData:false,
                    async:false,
                    success:function (result) {
                        console.log(result)
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    }
                })

            }
        }

    })
</script>
</body>
</html>